<template>
  <div class="param-value-display">
    <!-- 多测次参数显示 -->
    <div v-if="isMultiMeasureParam" class="multi-measure-display">
      <div 
        v-for="(measure, index) in measureValues" 
        :key="index"
        class="measure-item"
        :class="{ 'has-error': !measure.isValid }"
      >
        <span class="measure-label">测次{{ index + 1 }}:</span>
        <span class="measure-value">{{ formatValue(measure.value) }}</span>
        <el-tooltip 
          v-if="!measure.isValid && showValidation" 
          :content="measure.message"
          placement="top"
        >
          <i class="el-icon-warning-outline error-icon"></i>
        </el-tooltip>
      </div>
      
      <!-- 多测次统计 -->
      <div v-if="showStatistics" class="measure-statistics">
        <el-divider content-position="left">统计</el-divider>
        <div class="stats-row">
          <span class="stat-label">平均值:</span>
          <span class="stat-value">{{ calculateAverage() }}</span>
        </div>
        <div class="stats-row">
          <span class="stat-label">最大值:</span>
          <span class="stat-value">{{ calculateMax() }}</span>
        </div>
        <div class="stats-row">
          <span class="stat-label">最小值:</span>
          <span class="stat-value">{{ calculateMin() }}</span>
        </div>
      </div>
    </div>

    <!-- 普通参数显示 -->
    <div v-else class="single-value-display" :class="{ 'has-error': !isValid && showValidation }">
      <span class="value-text">{{ formattedValue }}</span>
      
      <!-- 验证状态图标 -->
      <el-tooltip 
        v-if="showValidation" 
        :content="validationMessage"
        placement="top"
      >
        <i 
          :class="[
            'validation-icon',
            isValid ? 'el-icon-success success-icon' : 'el-icon-warning-outline error-icon'
          ]"
        ></i>
      </el-tooltip>
      
      <!-- 计算参数标识 -->
      <el-tooltip 
        v-if="param.paramType === 'calculation'" 
        content="计算参数"
        placement="top"
      >
        <i class="el-icon-cpu calc-icon"></i>
      </el-tooltip>
    </div>

    <!-- 空值提示 -->
    <div v-if="isEmpty" class="empty-value">
      <span class="empty-text">未填写</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ParamValueDisplay',
  props: {
    param: {
      type: Object,
      required: true,
      default: () => ({})
    },
    value: {
      type: [Object, Array, String, Number],
      default: null
    },
    showValidation: {
      type: Boolean,
      default: false
    },
    showStatistics: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    /**
     * 是否为多测次参数
     */
    isMultiMeasureParam() {
      return this.param.isMultiMeasure && 
             this.param.multiMeasureCount > 1 && 
             Array.isArray(this.value)
    },
    
    /**
     * 多测次值数组
     */
    measureValues() {
      if (!this.isMultiMeasureParam) return []
      return this.value.map(item => ({
        value: item.value,
        isValid: item.isValid !== false,
        message: item.message || ''
      }))
    },
    
    /**
     * 格式化后的值
     */
    formattedValue() {
      if (this.isEmpty) return '-'
      
      let displayValue = this.normalizedValue
      
      // 数字类型格式化
      if (this.param.dataType === 'number' && !isNaN(displayValue)) {
        const precision = this.param.precision || 2
        displayValue = Number(displayValue).toFixed(precision)
      }
      
      // 布尔类型格式化
      if (this.param.dataType === 'boolean') {
        displayValue = displayValue ? '是' : '否'
      }
      
      return displayValue
    },
    
    /**
     * 规范化值
     */
    normalizedValue() {
      if (this.value === null || this.value === undefined) return ''
      
      if (typeof this.value === 'object' && 'value' in this.value) {
        return this.value.value
      }
      
      return this.value
    },
    
    /**
     * 是否为空值
     */
    isEmpty() {
      if (this.isMultiMeasureParam) {
        return this.measureValues.every(item => 
          item.value === '' || item.value === null || item.value === undefined
        )
      }
      
      const val = this.normalizedValue
      return val === '' || val === null || val === undefined
    },
    
    /**
     * 验证状态
     */
    isValid() {
      if (this.isEmpty) return true
      
      if (this.isMultiMeasureParam) {
        return this.measureValues.every(item => item.isValid)
      }
      
      if (typeof this.value === 'object' && 'isValid' in this.value) {
        return this.value.isValid !== false
      }
      
      return true
    },
    
    /**
     * 验证消息
     */
    validationMessage() {
      if (this.isValid) return '验证通过'
      
      if (this.isMultiMeasureParam) {
        const errorMeasure = this.measureValues.find(item => !item.isValid)
        return errorMeasure ? errorMeasure.message : '数据验证失败'
      }
      
      if (typeof this.value === 'object' && 'message' in this.value) {
        return this.value.message || '数据验证失败'
      }
      
      return '数据验证失败'
    }
  },
  methods: {
    /**
     * 格式化单个值
     */
    formatValue(value) {
      if (value === '' || value === null || value === undefined) return '-'
      
      let formatted = value
      
      if (this.param.dataType === 'number' && !isNaN(value)) {
        const precision = this.param.precision || 2
        formatted = Number(value).toFixed(precision)
      }
      
      return formatted
    },
    
    /**
     * 计算平均值
     */
    calculateAverage() {
      if (!this.isMultiMeasureParam) return '-'
      
      const numericValues = this.measureValues
        .map(item => Number(item.value))
        .filter(val => !isNaN(val))
      
      if (numericValues.length === 0) return '-'
      
      const sum = numericValues.reduce((acc, val) => acc + val, 0)
      const average = sum / numericValues.length
      const precision = this.param.precision || 2
      
      return average.toFixed(precision)
    },
    
    /**
     * 计算最大值
     */
    calculateMax() {
      if (!this.isMultiMeasureParam) return '-'
      
      const numericValues = this.measureValues
        .map(item => Number(item.value))
        .filter(val => !isNaN(val))
      
      if (numericValues.length === 0) return '-'
      
      const max = Math.max(...numericValues)
      const precision = this.param.precision || 2
      
      return max.toFixed(precision)
    },
    
    /**
     * 计算最小值
     */
    calculateMin() {
      if (!this.isMultiMeasureParam) return '-'
      
      const numericValues = this.measureValues
        .map(item => Number(item.value))
        .filter(val => !isNaN(val))
      
      if (numericValues.length === 0) return '-'
      
      const min = Math.min(...numericValues)
      const precision = this.param.precision || 2
      
      return min.toFixed(precision)
    }
  }
}
</script>

<style scoped>
.param-value-display {
  width: 100%;
}

/* 多测次显示样式 */
.multi-measure-display {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.measure-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 3px;
  background: #f8f9fa;
  transition: all 0.2s;
}

.measure-item.has-error {
  background: #fef0f0;
  border: 1px solid #fbc4c4;
}

.measure-label {
  font-size: 12px;
  color: #909399;
  min-width: 50px;
}

.measure-value {
  font-weight: 500;
  color: #303133;
  flex: 1;
}

.error-icon {
  color: #f56c6c;
  cursor: help;
}

/* 统计信息样式 */
.measure-statistics {
  margin-top: 8px;
  padding: 8px;
  background: #f0f9ff;
  border-radius: 4px;
  border: 1px solid #d9ecff;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  font-size: 12px;
}

.stat-label {
  color: #606266;
}

.stat-value {
  font-weight: 600;
  color: #409eff;
}

/* 单值显示样式 */
.single-value-display {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 3px;
  background: #f8f9fa;
  transition: all 0.2s;
}

.single-value-display.has-error {
  background: #fef0f0;
  border: 1px solid #fbc4c4;
}

.value-text {
  font-weight: 500;
  color: #303133;
  flex: 1;
}

.validation-icon {
  font-size: 14px;
  cursor: help;
}

.success-icon {
  color: #67c23a;
}

.calc-icon {
  color: #409eff;
  cursor: help;
}

/* 空值样式 */
.empty-value {
  padding: 4px 8px;
}

.empty-text {
  font-size: 12px;
  color: #c0c4cc;
  font-style: italic;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .measure-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .measure-label {
    min-width: auto;
  }
  
  .stats-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}
</style>